//
// Tabs
// --------------------------------------------------

@tab-width: 120px;
@tab-height: 36px;
@tab-card-bg-default: #f7f7f7;

.tabs {
    .clearfix();

    li {
        float: left;
        line-height: @tab-height;
        position: relative;
        width: @tab-width;
        cursor: pointer;

        a {
            display: block;
            height: 100%;
            color: @text-color-light;
            font-size: @font-size-base;
            text-align: center;
            text-decoration: none;
        }

        &.disabled a {
            color: @text-color-disabled !important;
            cursor: default !important;
        }

        i {
            margin-right: 5px;
            font-size: @font-size-base + 2;
        }
    }
}

.tabs-default {
    background-color: #fff;

    li {

        &:hover a,
        &.active a {
            color: @primary-color;
        }

        &:after {
            position: absolute;
            content: "";
            display: block;
            left: 10%;
            width: 80%;
            height: 2px;
            bottom: -1px;
            background-color: @primary-color;
            transition: all 200ms;
            transform: scale(0.2);
            opacity: 0;
        }

        &.active:after {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.tabs-card {
    border-bottom: 1px solid @border-color-base;

    li {
        margin-bottom: -1px;
        background-color: @tab-card-bg-default;
        border: 1px solid @border-color-base;
        border-left-color: transparent;

        &:first-child {
            border-left-color: @border-color-base;
        }

        &:hover a,
        &.active a {
            color: @text-color-base;
        }

        &.active {
            background-color: #fff;
            border-bottom-color: #fff;
        }
    }
}

.tab-content {
    background-color: #fff;

    &.bordered {
        border: 1px solid @border-color-base;
        border-top: 0;
    }
    
    > .tab-pane {
        display: none;
        padding: 16px @common-content-padding;

        &.active {
            display: block;
        }
    }
}